
<template>
  <div class="bg bg2 height80 row acenter all">
    <div :class="['op',Number(price) <= min ? 'op-no-enable':'op-enable']" @click="onSub">
      <LImage class="op-sub-img" :src="Config.img('ic_ai_sub.png')"></LImage>
    </div>

    <input ref="input" class="input-content font34 text2" :value="price" type="number" @input="onInput" />

    <div :class="['op',Number(price) >= max ? 'op-no-enable':'op-enable']" @click="onAdd">
      <LImage class="op-add-img" :src="Config.img('ic_ai_add.png')"></LImage>
    </div>
  </div>
</template>

<script>
  import jmodal from "@/_js/modal";
  import jconfig from "@/_js/config";
  import jdebug from "@/_js/debug";
  export default {
    components: {},
    props: {
      //默认价格
      dPrice: {
        type: String,
        default: "0",
      },
      min: {
        type: Number,
        default: 0,
      },
      max: {
        type: Number,
        default: 10000000000,
      },
    },

    data() {
      return {
        Config: jconfig,
        price: "0",
        dLength: 2,
        step: 0.01,
      };
    },

    mounted() {
      this.price = this.dPrice;
      this.dLength = this.getDecimalPlaces(this.dPrice);
      this.step = Math.pow(10, -this.dLength);
    },

    computed: {},

    methods: {
      onInput(e) {
        let value = Number(e.value);
        if (this.getDecimalPlaces(value+"") > this.dLength) {
          this.price = value.toFixed(this.dLength);
        } else {
          this.price = value+"";
        }
        this.$emit("onPriceChange", this.price);
      },
      onAdd() {
        if (Number(this.price) < this.max) {
          this.price = (Number(this.price) + this.step).toFixed(this.dLength);
          this.$emit("onPriceChange", this.price);
        }
      },
      onSub() {
        if (Number(this.price) > this.min) {
          this.price = (Number(this.price) - this.step).toFixed(this.dLength);
          this.$emit("onPriceChange", this.price);
        }
      },
      getDecimalPlaces(value) {
        if (!value.includes(".")) return 0; // 如果没有小数点，返回 0
        return value.split(".")[1].length; // 返回小数点后的位数
      },
      blur() {
         this.$refs.input && this.$refs.input.blur();
      }
    },
  };
</script>

<style src="@/_css/style.css" ></style>
<style scoped>
  .bg {
    border-color: #151a2a;
    border-radius: 4px;
    border-width: 1px;
  }
  .input-content {
    flex: 1;
    height: 80px;
    text-align: center;
  }

  .op {
    border-color: #252a4d;
    border-width: 1px;
    border-radius: 4px;
    width: 80px;
    height: 80px;
    justify-content: center;
    align-items: center;
  }
  .op-enable {
    opacity: 1;
  }
  .op-no-enable {
    opacity: 0.5;
  }
  .op-sub-img {
    width: 34px;
    height: 4px;
  }
  .op-add-img {
    width: 34px;
    height: 34px;
  }
</style>
